import { defineComponent, type PropType, Transition } from "vue";
import { NCalendar, NDropdown } from "naive-ui";
import { deskTopDefaultNavMenus, EmitNames, getSystemOptions, zhNumArr } from "@/constants/common";
import emitter from "@utils/common/Mitt";
import SvgIcon from "@components/common/SvgIcon";
import { useAppStore } from "@/stores";
import type { DesktopInterface } from "@/typings/desktop";

export default defineComponent({
  name: "DesktopNavMenu",
  props: {
    isCalendarShow: { type: Boolean, required: true },
    onUpdateCalendarShow: { type: Function as PropType<(isShow: boolean) => void>, required: true },
  },
  setup(props) {
    onMounted(() => {
      // @ts-ignore
      desktopNavs.value.push(...deskTopDefaultNavMenus);
    });

    const desktopNavs = ref<DesktopInterface.DeskTopNavMenu[]>([]);
    const router = useRouter();
    const { nowActiveApp } = storeToRefs(useAppStore());

    emitter.on(EmitNames.ChangeDesktopNav, function () {
      desktopNavs.value = [];
      // @ts-ignore
      desktopNavs.value.push(...deskTopDefaultNavMenus);
      const navMenu = nowActiveApp.value?.navMenu;
      if (navMenu) {
        navMenu.map(item => {
          desktopNavs.value.push(item);
        });
      }
    });

    /**
     * 系统菜单栏logo图标
     */
    const systemIcons = ["bxl:apple", "bxl:windows", "bxl:tux", "bxl:dribbble", "bxl:android", "bxl:chrome"];
    const dateValue = ref(Date.now());

    const fmtDateTime = useDateFormat(useNow(), "M月D日 ddd HH:mm:ss");

    const menuIcons = ref<{ icon: string; size: number; isLocal?: boolean }[]>([
      {
        icon: "ion:battery-charging",
        size: 22,
      },
      {
        icon: "bx:search",
        size: 20,
      },
      {
        icon: "control-center",
        size: 22,
        isLocal: true,
      },
    ]);

    return () => (
      <div class="bg-white/40 flex flex-row justify-center items-center content-center h-[28px] backdrop-blur-[100px] text-14px p-[0_5px] z-[100]">
        <div class="flex flex-row justify-center items-center content-center h-[28px]">
          <NDropdown
            style={{ marginTop: "1px", padding: "8px 4px" }}
            trigger="click"
            placement="bottom-start"
            size="small"
            options={getSystemOptions("shareloke")}
            onSelect={(key: string) => {
              // 处理选中子项点击事件
              window.$message.info(key);
              switch (key) {
                case EmitNames.LockScreen:
                  emitter.emit(key, true);
                  break;
                case EmitNames.Logout:
                  // useUserStore().removeToken();
                  router.push({ path: "/login" }).then();
                  break;
              }
            }}
          >
            <div class="hover:bg-gray-900 hover:rounded-[5px] h-full flex items-center justify-center cursor-pointer relative p-[0_10px_0_15px]">
              <SvgIcon icon={systemIcons[0]} color={"#000"} size="22" />
            </div>
          </NDropdown>

          <div class="flex flex-row items-center text-[15px] h-full">
            {desktopNavs.value.map(item => {
              return (
                <NDropdown
                  style={{ marginTop: "1px", padding: "8px 4px" }}
                  trigger="click"
                  placement="bottom-start"
                  size="small"
                  options={item.children}
                >
                  <div class="px-2">{item.label}</div>
                </NDropdown>
              );
            })}
          </div>
        </div>

        <div class="space"></div>

        <div class="flex flex-row justify-center items-center h-full">
          <div class="cursor-pointer flex flex-row justify-center items-center px-2.5">
            {/* 本地svg 图标*/}
            <icon-local-acrobat
              class="text-2xl"
              onClick={() => {
                console.log("asdfggggggg");
              }}
            ></icon-local-acrobat>
          </div>

          <div class="cursor-pointer flex flex-row justify-center items-center px-2.5">
            {/* iconify 图标 */}
            <icon-material-symbols-10k class="text-2xl"></icon-material-symbols-10k>
          </div>

          {menuIcons.value.map(item => {
            return (
              <div class="cursor-pointer flex flex-row justify-center items-center px-2.5">
                <SvgIcon icon={item.icon} size={item.size} isLocal={item.isLocal} />
              </div>
            );
          })}

          <div
            class="datetime cursor-pointer flex justify-center items-center relative py-0 px-2.5 h-full"
            onClick={e => {
              e.stopPropagation();
              // 显示、隐藏日历
              props.onUpdateCalendarShow(!props.isCalendarShow);
            }}
          >
            <span v-text={fmtDateTime.value.substring(0, 14)} class="min-w-[146px] max-w-[156px] text-end"></span>
            <span v-text={fmtDateTime.value.substring(14)} class="w-[20px]"></span>
            <Transition name="fade-calendar">
              {props.isCalendarShow ? (
                <div class="top-calendar fixed right-2 bg-white rounded-xl p-4">
                  <NCalendar
                    v-model={[dateValue.value, "value"]}
                    onUpdateValue={(_, { year, month, date }) => {
                      window.$message.success(`${year} 年 ${month} 月 ${date} 日`);
                    }}
                    v-slots={{
                      header: (props: { year: number; month: number }) => {
                        return <span>{props.year + "年 " + zhNumArr[props.month - 1]}月</span>;
                      },
                    }}
                  />
                </div>
              ) : null}
            </Transition>
          </div>
        </div>
      </div>
    );
  },
});
